<template>
  <div class="container">
    <!-- 留言按钮 -->
    <div class="ly">
      <el-row class="mb-1">
        <el-button color="#D9E2C8" plain @click="dialogFormVisible = true"
          >留言</el-button
        >
      </el-row>
    </div>
    <!-- 遮罩+发表内容 -->
    <el-dialog v-model="dialogFormVisible" title="留言">
      <el-form :model="form">
        <textarea
          style="width: 100%; height: 100px"
          v-model="textarea"
        ></textarea>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="success" @click="sent(), (dialogFormVisible = false)"
            >发表</el-button
          >
        </span>
      </template>
    </el-dialog>
    <!-- 搜索栏和导出和删除 -->
    <div class="sds">
      <!-- 搜索框 -->
      <div class="demo-input-size">
        <el-input
          v-model="input2"
          class="w-50 m-2"
          placeholder="请搜索宁的内容"
          :suffix-icon="Search"
          @input="find(input2)"
        />
      </div>
      <!-- 导出和删除按钮 -->
      <div class="flex">
        <el-button type="success" :icon="Edit">导出</el-button>
        <el-button type="success" :icon="Delete" @click="delall()">删除</el-button>
      </div>
    </div>
    <!-- 留言栏头部 msgHeader -->
    <div class="msgHeader">
      <input type="checkbox" :checked="checked" @click="changeAllChecked()" />
      <div class="headInner">
        <p>客户姓名</p>
        <p>电话</p>
        <p>日期</p>
        <p>内容</p>
        <div></div>
      </div>
    </div>
    <!-- 留言栏msgBoard -->
    <div
      class="msgBoard"
      v-for="(item, index) in list"
      :key="index"
      @click="msgClick(index,item)"
      :class="{ active: act === index }"
    >
      <input type="checkbox" :checked="item.checked" @click.stop="itemCheck(item)" />
      <div class="boardInner">
        <p class="users">{{ item.name }}</p>
        <p class="tels">{{ item.tel }}</p>
        <!-- 日历 -->
        <div class="calendar">
          <div class="demo-date-picker">
            <el-date-picker
              v-model="item.date"
              type="date"
              placeholder="Pick a day"
              format="YYYY/MM/DD"
              value-format="YYYY-MM-DD"
              size="small"
            >
              <template #default="cell">
                <div class="cell" :class="{ current: cell.isCurrent }">
                  <span class="text">{{ cell.text }}</span>
                  <span v-if="isHoliday(cell)" class="holiday"></span>
                </div>
              </template>
            </el-date-picker>
          </div>
        </div>
        <p class="say">
          {{ item.comment }}
        </p>
        <div
          class="more"
          @click="moreClick(index)"
          :class="{ moreAct: moreAct === index }"
        >
          <div></div>
          <div></div>
          <div></div>
        </div>
        <div class="btn2" v-show="index === flag">
            <span>修改</span
            ><span @click="del(item)">删除</span>
          </div>
      </div>
    </div>
    <!-- 分页 -->
    <div class="manyPages">
      <!-- 左侧 -->
      <div class="left">
        <span class="btnn"><i class="iconfont icon-xiangzuojiantou"></i></span>
        <span>显示{{ currentPage * 3 - 2 }}-{{ currentPage * 3 }}条&emsp;</span>
        <span>共{{ total }}条</span>
      </div>
      <!-- 右侧 -->
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 20, 40]"
        :page-size="pagesize"
        layout="prev, pager, next"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { ElMessage, ElMessageBox } from 'element-plus'
import { Search, Delete, Edit } from "@element-plus/icons-vue";
import { ref, reactive, onMounted, h } from "vue";
// import { useStore } from "vuex";
// 修改随机数据
import change from "../../../mock/mockGUO";
export default {
  setup() {
    // const store = useStore();
    // 留言数据
    // currentPage.value, pagesize.value
    onMounted(async () => {
      const res = await change.getData(currentPage.value, pagesize.value);
      list.value = res.ly;
      total.value = res.count;
      console.log(res);
    });

    let textarea = ref("");
    // 更多按钮相关标记
    const flag = ref(-1);
    const list = ref([]);
    const currentList = ref([]);
    const act = ref("");
    const moreAct = ref("");
    // 点击留言板内容
    const msgClick = (i,item) => {
      
      if (flag.value == i) {
        flag.value = -1;
        act.value = -1;
        moreAct.value = -1;
        itemCheck(item)

      } else {
        flag.value = i;
        act.value = i;
        moreAct.value = i;
        itemCheck(item)
      }
    };
    // 点击更多
    const moreClick = (i) => {
      moreAct.value = i;
    };
    // 当前的日期
    const value = ref("2022-02-25");
    // 周一到周日
    const holidays = [
      "2022-02-26",
      "2022-02-27",
    ];
    // 判断是不是假期
    const isHoliday = ({ dayjs }) => {
      return holidays.includes(dayjs.format("YYYY-MM-DD"));
    };
    let total = ref(0);
    const dialogTableVisible = ref(false);
    const dialogFormVisible = ref(false);
    const form = reactive({
    });
    let checked = ref(false);
    function changeAllChecked() {
      checked.value = !checked.value;
      change
        .checkAll(checked.value, currentPage.value, pagesize.value)
        .then((res) => {
          list.value = res.ly;
          total.value = res.count;
        });
    }

    function getCurrentTime() {
      //获取当前时间并打印
      let yy = new Date().getFullYear();
      let m1 = new Date().getMonth() + 1;
      let dd = new Date().getDate();
      let mm = "0" + m1;
      let gettime = yy + "-" + mm + "-" + dd;
      return gettime;
    }
    // 发送留言
    function sent() {
      change.add({
        comment: textarea.value,
        date: getCurrentTime(),
        name: "我",
        tel: "12345678901",
        userId: list.value,
      });
      change.getData(currentPage.value, pagesize.value).then((res) => {
        list.value = res.ly;
        total.value = res.count;
        console.log(list.value,"我是List");
      });
      textarea.value = "";
    }
    function itemCheck(item) {
      checked.value = change.itemCheck1(
        item.userId,
        checked.value,
        currentPage.value,
        pagesize.value
      );
      console.log(checked.value, '单选被选中了');
    }

    function find(val) {
      // current是当前页
      // pagesize是
      change.find(val, currentPage.value, pagesize.value).then((res) => {
        list.value = res.ly;
        total.value = res.count;
        console.log(res);
      });
    }

    // 宁确定要删除选中的留言吗
    const delall = () => {
      if (confirm("宁确定要删除选中的留言吗?")) {
      // if(open()){
        change.delchoose(currentPage.value, pagesize.value).then((res) => {
          list.value = res.ly;
          total.value = res.count;
        });
      }
    };

    // 确认删除 方案2
    const open = () => {
  ElMessageBox({
    title: 'Message',
    message: h('p', null, [
      h('span', null, 'Message can be '),
      h('i', { style: 'color: teal' }, 'VNode'),
    ]),
    showCancelButton: true,
    confirmButtonText: 'OK',
    cancelButtonText: 'Cancel',
    beforeClose: (action, instance, done) => {
      if (action === 'confirm') {
        instance.confirmButtonLoading = true
        instance.confirmButtonText = 'Loading...'
        setTimeout(() => {
          done()
          setTimeout(() => {
            instance.confirmButtonLoading = false
          }, 300)
        }, 3000)
      } else {
        done()
      }
    },
  }).then((action) => {
    ElMessage({
      type: 'info',
      message: `action: ${action}`,
    })
  })
}

    // 删除选中的留言
    const del = (item) => {
      // 获取Id
      console.log(item.userId);
      change.delete(item.userId).then((res) => {
        if (res) {
          change.getData(currentPage.value, pagesize.value).then((res) => {
            list.value = res.ly;
            total.value = res.count;
          });
        }
      });
    };

    let currentPage = ref(1); //初始页
    let pagesize = ref(3);
    let input2 = ref("");
    return {
      // icon图标
      Search,
      Delete,
      Edit,
      open,
      ElMessage, 
      ElMessageBox,
      act,
      moreAct,
      flag,
      value,
      holidays,
      isHoliday,
      // 1.点击留言内容2.点击更多按钮3.点击发布留言
      msgClick,
      moreClick,
      itemCheck,
      dialogTableVisible,
      dialogFormVisible,
      form,
      list,//表示留言
      textarea,//留言文本域
      currentPage, //初始页
      pagesize,//一页有多少条数据
      sent,
      find,
      del,
      delall,
      input2,
      total,
      getCurrentTime,
      currentList,
      changeAllChecked,
      checked,
      handleCurrentChange: (currentPage1) => {
        currentPage.value = currentPage1;
        change.getData(currentPage.value, pagesize.value).then((res) => {
          list.value = res.ly;
          console.log(list.value);
        });
      },
    };
  },
};
</script>

<style lang="less" scoped>
  @import url("../../../assets/css/leave.less");
</style>
